<template>
	<view>
		<view class="artistes" v-if="myLiulan.length != 0">
			<view class="artistesBox" v-for="(item,key) in myLiulan" :key="key">
				<view class="artInfos" @click="gotoArtiter(item.UserID)">
					<view class="artHeadPic">
					<!-- 	<view style="position:absolute;z-index:50;right:-5rpx;top:-10rpx" v-if="item.isAuthOk == 2">
							<image :src="baseUrl + 'icon/authed.png'" style="width:25rpx;height:25rpx;"></image>
						</view>
						<image :src="item.WxHeadPic"></image> -->
						
						<ZtHeadWear :width="80" :height="80" :borderWidth="4" :userInfo="item" :WxHeadPic="item.WxHeadPic" :UserLevelID="item.UserLevelID" image-width="30" image-height="20" size="16" right="-7" bottom="0" oneRight="0"></ZtHeadWear>
					</view>
					<view class="artInfo">
						<view class="artName">
							<text style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 80%;">{{item.NickName}}</text>
							<image :src="baseUrl + 'icon/boy.png'" style="width:25rpx;height:25rpx;margin-left: 5rpx;" v-if="JSON.parse(item.UserSex).text === '男'"></image>
							<image :src="baseUrl + 'icon/girl.png'" style="width:25rpx;height:25rpx;margin-left: 5rpx;" v-if="JSON.parse(item.UserSex).text === '女'"></image>
							
							<ztAuthLabel v-if="item.isAuthOk == 2" :size="18" height="30"></ztAuthLabel>
							<ZtPersonalityLabel v-if="item.BeautifulWomen == 1" :size="18" height="30"></ZtPersonalityLabel>
							<image :src="baseUrl + 'icon/enterprise.png'" style="width: 34rpx;height: 34rpx;margin-left: 10rpx;" v-if="item.isCompanyAuth && item.isCompanyAuth == 1"></image>
						</view>
						<view class="artLabel">
							<text>
								<text v-for="(roleitem,roleindex) in item.Roles" :key="roleindex">
									{{ roleitem.LabelName }}
									<text v-if="roleindex < item.Roles.length-1">，</text>
								</text>
							</text>
							<text class="geline"> | </text>
							<text class="artAddr">{{ item.UserCity }}</text>
						</view>
					</view>
					<view class="artState">
						<view style="font-size:24rpx;" v-if="item.isOnline == 1">在线</view>
						<view style="font-size:24rpx;" v-else>
							{{ $common.timeDiff(item.onlineTime,new Date()) }}
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view style="display: flex;flex-direction: row;justify-content: center;align-items: center;margin-top: 50rpx;" v-else>
			<view class="">
				<image :src="baseUrl + 'icon/null.png'" mode="widthFix"></image>
				<view class="" style="text-align: center;">
					快去查看<text style="color: #FFDD00;margin: 0 5rpx;" @click="$common.goSwtPage('/page/index/index')">艺人</text>吧~
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import ztAuthLabel from "@/components/authLabel.vue";
	import ZtPersonalityLabel from "@/components/personalityLabel.vue";
	import ZtHeadWear from "@/components/headwear.vue"
	export default {
		components: {
			ztAuthLabel,
			ZtPersonalityLabel,
			ZtHeadWear
		},
		data() {
			return {
				myLiulan: [],
				baseUrl: ''
			};
		},
		onLoad() {
			this.baseUrl = this.$baseUrl;
			this.loadData();
		},
		methods:{
			loadData() {
				this.$httpost('/UserCenter/myLiulan', {}).then(res => {
					this.myLiulan = res.data.myLiulan
				});
			},
			gotoArtiter(artisterID) {
				uni.navigateTo({
					url: '/artistesPages/pages/artister?artisterID=' + artisterID
				})
			},
		}
	}
</script>

<style lang="scss">
	.artistes {
		padding:10rpx
	}
	.artistesBox {
		margin-top:10rpx;
		height:auto;
		background-color: #FFF;
		border-radius: 15rpx;
		padding:26rpx;
		padding-bottom:40rpx;
	}
	.artInfos {
		// display: flex;
		// justify-content: space-between;
		height:60rpx;
	}
	.artHeadPic {
		position:relative;
		float:left;
		width:80rpx;
		height:80rpx;
		background-color: #CCC;
		// background-image: url('https://hbimg.huabanimg.com/53392e6876c6a69c39da3a2a63c3a62ed4f9d26d23a781-4ckBVh_fw658');
		// background-position: center;
		background-size: cover;
		border-radius: 80rpx;
	}
	.artHeadPic image {
		width:80rpx;
		height:80rpx;
		border-radius: 80rpx;
	}
	.artInfo {
		float:left;
		width:60vw;
		margin-left:20rpx;
	}
	.artName {
		font-size:30rpx;
		display: flex;flex-direction: row;justify-content: flex-start;align-items: center;
	}
	.artLabel {
		margin-top: 10rpx;
		font-size:20rpx;
		color:#999;
		white-space: nowrap;
		max-width: 400rpx;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.artState {
		width:120rpx;
		float:right;
		text-align: right;
		color:#999
	}
	.geline {
		padding-left: 20rpx;
		padding-right: 20rpx;
	}
	.artAddr {

	}
</style>
